<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选项卡</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body{
            padding: 30px;
        }
    </style>
</head>

<body>
<!--导航选项卡-->
<!-- <ul class="nav nav-pills">
<li class="active"><a href="#name1" >首页</a></li>
<li><a href="#name2" >技能课</a></li>
<li><a href="#name3" >岗位课</a></li>
<li><a href="#name4" >微社区</a></li>
</ul>-->

<ul class="nav nav-tabs">
    <li class="active"><a href="#name1" data-toggle="tab">home</a></li>
    <li><a href="#name2" data-toggle="tab">Profile</a></li>
    <li><a href="#name3" data-toggle="tab">fat</a></li>
    <li><a href="#name4" data-toggle="tab">mdo</a></li>
</ul>

<!--选项卡面板-->
<div class="tab-content">
    <div class="tab-pane fade in active" id="name1"> <!-- fade有淡入淡出的效果-->
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt
            tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor,
            williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
            dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson
            ex squid. Aliquip placeat salvia cillum iphone.Seitan aliquip quis cardigan
            american apparel, butcher voluptate nisi qui. </p>
    </div>
    <div class="tab-pane fade " id="name2">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin
            coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings
            next level wes anderson artisan four loko farm-to-table craft beer twee.
            Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean
            shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore
            aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna
            velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson
            8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
            biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui
            sapiente accusamus tattooed echo park.</p>
    </div>
    <div class="tab-pane fade" id="name3">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out
            mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.
            Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard
            locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
            irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi
            whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk
            vice blog. Scenester cred you probably haven't heard of them, vinyl craft
            beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
    </div>
    <div class="tab-pane fade" id="name4">
        <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party
            before they sold out master cleanse gluten-free squid scenester freegan
            cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf
            cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR,
            banh mi before they sold out farm-to-table VHS viral locavore cosby
            sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh
            craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo
            park vegan.</p>
    </div>
</div>

<script src="js/jquery-1.12.4.js"></script>
<script src='js/bootstrap.min.js'></script>
<script>

   // 方法使用
    /*$('.nav a').click(function(e){
        e.preventDefault();
        $(this).tab('show');
    })*/


//对单个选项卡进行调用
// $('.nav a[href="#name2"]').tab('show')   // 通过名字选择tab
//    $('.nav a:last').tab('show')              // 选择最后一个tab
//    $('.nav li:eq(2) a').tab('show')        // 选择第三个tab (索引从0开始)





   //事件使用
    //hide.bs.tab (在tab即将隐藏还未隐藏之前触发)
    //show.bs.tab (在tab即将显示还未显示之前触发)
    //hidden.bs.tab (在tab完全隐藏之后,css动画也要结束才触发)
    //shown.bs.tab (在tab完全显示之后,css动画也要结束才触发)

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        alert(1);
    })
</script>
</body>
</html>